<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<link rel="stylesheet" href="css/amazeui.min.css">
		<link rel="stylesheet" href="css/all-wap.css">
		<link rel="stylesheet" href="css/type-wap.css">
		<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
		<script type="text/javascript" src="js/TouchSlide.1.1.js"></script>
		<script type="text/javascript" src="js/layer.js"></script>
		<script type="text/javascript" src="js/amazeui.min.js"></script>
		<title>图库</title>
	</head>

	<body style="background: #FFFFFF;">
		<div class="pet_mian">
			<!--header-->
			<header class="am-header i-top memmber-top">
				<div class="am-header-left am-header-nav s-blank memmber-blank">
					<a href="">
						<img src="images/news/back.png" /> 素年锦时
					</a>

				</div>
				<span class="am-header-title">
          <a class="append-h-title">
            /5
          </a>
      </span>
			</header>
			<!--header-->
			<div class="pet_circle-new" style="padding: 0;border: none;margin-top: 49px">
				<!--轮播图-->
				<div id="slideBox" class="slideBox h-tkBox" style="margin-top: 0">

				<div class="bd">
					<ul>
						<li>
							<a href="#"><img src="images/index/bg1.jpg" /></a>
						</li>
						<li>
							<a href="#"><img src="images/news/bg1.jpg" /></a>
						</li>
						<li>
							<a href="#"><img src="images/index/bg1.jpg" /></a>
						</li>
						<li>
							<a href="#"><img src="images/index/bg1.jpg" /></a>
						</li>
					</ul>
				</div>

				<div class="hd h-hb">
					<ul>

					</ul>
				</div>
			</div>
			<script type="text/javascript">
				TouchSlide({
					slideCell: "#slideBox",
					titCell: ".hd ul ", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
					mainCell: ".bd ul",
					effect: "leftLoop",
					autoPage: true, //自动分页
					autoPlay: false, //自动播放
					interTime: 5000
				});
			</script>

			<!-- 图片居中 -->
			<script type="text/javascript">
				
				var _h=$(window).height();
				var boxH=_h-49*2-72;
				$(".h-tkBox").height(boxH);

                $(".h-tkBox .bd li").each(function(){
                	var _this=$(this);
                	var imgH=_this.find($("img")).height();
					var imgMargin=(boxH-imgH)/2;

				if(imgH<boxH){
					_this.find($("img")).css("margin-top",imgMargin);
					}

                })
				

			</script>
				<!--轮播图-->

				<div class="am-g h-table-tk">
					<div class="am-u-sm-6" style="padding: 0;">
					<h2 class="am-titlebar-title ">
                                                       亲亲子衿 悠悠我心
                      </h2>
					<p>
						<span style="float: left; color: #747474;">
                    		2016年9月21日上传
                    	</span>
					</p>
					</div>					
							<div class="am-u-sm-6" style="margin-top:20px ;">
							<div class="am-u-sm-3"><button class="h-tk-sc"></button></div>
							<script>
								$('.h-tk-sc').on('click', function() {
									layer.open({
										content: '图片收藏成功',
										 style: 'border:none; background:rgba(0,0,0,.3);',
										skin: 'msg',
										time: 2 //2秒后自动关闭
									});
								});
							</script>
							<div class="am-u-sm-3"><button class="h-tk-ly"></button></div>
							<div class="am-u-sm-3"><button class="h-tk-fx" data-am-modal="{target: '#news-share-no-sc'}"></button></div>
							<div class="am-u-sm-3"><button class="h-tk-xz"></button></div>
							<script>
								$('.h-tk-xz').on('click', function() {
									layer.open({
										content: '图片保存成功',
										 style: 'border:none; background:rgba(0,0,0,.3);',
										skin: 'msg',
										time: 2 //2秒后自动关闭
									});
								});
							</script>
						</div>	
				</div>
				<div class="am-modal-actions news-share-actions" id="news-share-no-sc">
						<div class="am-modal-actions-group news-share-group ">

							<ul class="am-list news-share-list">
								<li>
									<a href="#"><img src="images/news/weixin.jpg"></a>
									<div>微信好友</div>
								</li>
								<li>
									<a href="#"><img src="images/news/pyq.jpg"></a>
									<div>微信朋友圈</div>
								</li>
								<li>
									<a href="#"><img src="images/news/qq.jpg"></a>
									<div>QQ好友</div>
								</li>
								<li>
									<a href="#"><img src="images/news/kj.jpg"></a>
									<div>QQ空间</div>
								</li>
								<li>
									<a href="#"><img src="images/news/wb.jpg"></a>
									<div>新浪微博</div>
								</li>

							</ul>
						</div>
						<div class="am-modal-actions-group news-share-group-btn">
							<button class="am-btn am-btn-secondary am-btn-block" data-am-modal-close>取消</button>
						</div>
					</div>
			</div>
			<!--菜单-->
			<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default ">
				<ul class="am-navbar-nav am-cf am-avg-sm-4 i-footer">
					<li>
						<a href="">
							<img src="images/news.png" alt="新闻" />
							<span class="am-navbar-label">新闻</span>
						</a>
					</li>
					<li>
						<a href="">
							<img src="images/tj.png" alt="推荐" />
							<span class="am-navbar-label">推荐</span>
						</a>
					</li>
					<li>
						<a href="">
							<img src="images/tv.png" alt="直播" />
							<span class="am-navbar-label">直播</span>
						</a>
					</li>
					<li>
						<a href="">
							<img src="images/wo.png" alt="我" />
							<span class="am-navbar-label">我</span>
						</a>
					</li>
				</ul>
			</div>
			<!--菜单-->
		</div>
	</body>

</html>